<template>
  <div>
    <!-- 面包屑 -->
    <div class="container">
      <XtxBread>
        <XtxBreadItem to="/">
          首页
        </XtxBreadItem>
        <XtxBreadItem
          :to="`/category/${categoryObj.father.id}`"
          v-if="categoryObj.son.name"
        >
          {{ categoryObj.father.name }}
        </XtxBreadItem>
        <transition name="slide-fade" mode="out-in">
          <XtxBreadItem :key="categoryObj.son.id">
            {{ categoryObj.son.name }}
          </XtxBreadItem>
        </transition>
      </XtxBread>
    </div>
    <!-- 筛选 -->
    <SubFilters class="container" @filterChange="filterChangeHandler" />
    <!-- 排序 -->
    <SubSort class="container" @sortChange="sortChangeHandler" />
    <div class="list-wrapper container">
      <!-- 列表 -->
      <SubGoodsList :list="list" />

      <!-- 触底组件 -->
      <XtxInfiniteLoading
        :loading="loading"
        :finished="finished"
        @infinite="loadData"
      />
    </div>
  </div>
</template>

<script>
import SubFilters from './components/category-sub-filters.vue'
import SubSort from './components/category-sub-sort.vue'
import SubGoodsList from './components/category-goods-list.vue'
import { findSubCategoryGoods } from '@/api/category'
import { ref, watch, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useStore } from 'vuex'
export default {
  name: 'category-sub',
  components: {
    SubFilters,
    SubSort,
    SubGoodsList
  },
  setup () {
    // 需要传递数据的参数
    const loading = ref(false)
    const finished = ref(false)
    const list = ref([])
    const route = useRoute()
    const store = useStore()
    // 提交给接口的参数
    let queryParams = {
      categoryId: route.params.id,
      page: 1,
      pagesize: 20
    }

    const loadData = () => {
      // loading 开启
      loading.value = true
      findSubCategoryGoods(queryParams).then(res => {
        // 是否加载完毕判断
        if (res.result.items.length !== 0) {
          // 累加页码
          queryParams.page++
          list.value.push(...res.result.items)
        } else {
          // 加载完毕
          finished.value = true
        }
        // loading 关闭
        loading.value = false
      })
    }

    // 观察路由的改变
    watch(route, () => {
      // 清空数据 url的id参数 页码重置
      list.value = []
      queryParams.categoryId = route.params.id
      queryParams.page = 1
      // 状态还原之后 自动触发 loadData 自动获取数据
      loading.value = false
      finished.value = false
    })

    // 筛选条件变更之后的逻辑
    const filterChangeHandler = filterParams => {
      // 重新获取数据
      list.value = []
      // 合并筛选条件
      queryParams = {
        ...queryParams,
        ...filterParams
      }
      queryParams.page = 1
      // 状态还原之后 自动触发 loadData 自动获取数据
      loading.value = false
      finished.value = false
    }

    // 排序条件变更之后的逻辑
    const sortChangeHandler = sortParams => {
      // 重新获取数据
      list.value = []
      // 合并筛选条件
      queryParams = {
        ...queryParams,
        ...sortParams
      }
      queryParams.page = 1
      // 状态还原之后 自动触发 loadData 自动获取数据
      loading.value = false
      finished.value = false
    }

    // 面包屑
    const categoryObj = computed(() => {
      const _obj = { father: {}, son: {} }
      store.state.category.cateList.find(v => {
        if (v.children) {
          v.children.find(val => {
            if (val.id === route.params.id) {
              _obj.son = val
              _obj.father = v
              return true
            }
          })
        }
      })
      return _obj
    })

    return {
      loading,
      finished,
      list,
      categoryObj,
      loadData,
      filterChangeHandler,
      sortChangeHandler
    }
  }
}
</script>

<style lang="less" scoped>
.list-wrapper {
  background-color: #fff;
}
</style>
